<template>
  <div class="chart" id="Scatterchart"></div>
</template>

<script>
  import { inject, onMounted, reactive  } from "vue";
  import emitter from '../bus'

  export default {
      setup() {
    // 引入echarts
    let $echarts = inject("echarts");
    let $http = inject("axios");
    // 数据接收
    let ScatterData = reactive({});
    let time = []
    let vehicle = []
    let data = []
    let date2=[]
    let date3=[]
    let date4=[]
    let date5=[]
    let date6=[]
    let source=[
          
          // ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
          // ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
        ]
    console.log('这里是source',source)
    
    function setData(place) {
      date2.splice(0,data.length)
      date3.splice(0,data.length)
      date4.splice(0,data.length)
      date5.splice(0,data.length)
      vehicle.splice(0,data.length)
      source.splice(0,data.length)
      if (ScatterData.data.length > 0) {
          for (let item of ScatterData.data) {
            if(item['卡口名称']==place){
              time.push(item['时段']);
              vehicle.push(item['车辆类型']);
              let date=[]
              date.push(item['车辆类型']);
              date.push(item['时段']);
              date.push(item['过车数量']);
              data.push(date)
              if(item['时段']=='10:00-12:00'){
                date2.push(item['过车数量']);
              }
              if(item['时段']=='17:00-19:00'){
                date3.push(item['过车数量']);
              }
              if(item['时段']=='2:00-4:00'){
                date4.push(item['过车数量']);
              }
              if(item['时段']=='7:00-9:00'){
                date5.push(item['过车数量']);
              }
            }
          }
      }
      time = Array.from(new Set(time))
      date2 = Array.from(new Set(date2))
      date3 = Array.from(new Set(date3))
      date4 = Array.from(new Set(date4))
      date5 = Array.from(new Set(date5))
      vehicle = Array.from(new Set(vehicle))
      data =data.map(obj=>{
          return  Object.values(obj)
        })
      
      vehicle.splice(0, 0, "product");
      source.push(vehicle)
      date2.splice(0, 0, "10:00-12:00");
      source.push(date2)
      date3.splice(0, 0, "17:00-19:00");
      source.push(date3)
      date4.splice(0, 0, "2:00-4:00");
      source.push(date4)
      date5.splice(0, 0, "7:00-9:00");
      source.push(date5)
      
      
      console.log("小麦图:")
      console.log(time)
      console.log(vehicle)
      console.log(data)
    }
    async function getState() {
      ScatterData = await $http({ url: "/bayonethour/bayonet-hour" });
      console.log(ScatterData.data)
    }
    onMounted(() => {
    drawScatter("滨河")
    emitter.on('city', (city) => {
          drawScatter(city)
        })
      
    function drawScatter(place){
      
      // 初始化echarts
      let myChart = $echarts.init(document.getElementById("Scatterchart"));
      let option;
      console.log(place)
      getState().then(() => {
        setData(place);
        option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: source,
        },
        title: [
          {
            text: place+"卡口--不同时间段通过车辆数量",
            left: 'center',
            top: '8%',
            textStyle:{
                  color: 'bisque'//字体颜色
                },
            // triggerEvent: true,
          },
          
          {
            subtext: '其它',
            left: '23%',
            top: '32%',
            textAlign: 'center',
            triggerEvent: true,
          },
          {
            subtext: '小型普通客车',
            left: '23%',
            top: '57%',
            textAlign: 'center',
            triggerEvent: true,
          },
          {
            subtext: '大型汽车',
            left: '23%',
            top: '84%',
            textAlign: 'center',
            triggerEvent: true,
          },
          {
            subtext: '小型汽车',
            left: '48%',
            top: '32%',
            textAlign: 'center',
            triggerEvent: true,
          },
         
          {
            subtext: '普通二轮摩托车',
            left: '48%',
            top: '57%',
            textAlign: 'center',
            triggerEvent: true,
          },
          {
            subtext: '重型栏板货车',
            left: '48%',
            top: '84%',
            textAlign: 'center',
            triggerEvent: true,
          },
          {
            subtext: '微型栏板货车',
            left: '73%',
            top: '32%',
            textAlign: 'center',
            triggerEvent: true,
          },
          {
            subtext: '大型普通客车',
            left: '73%',
            top: '57%',
            textAlign: 'center',
            triggerEvent: true,
          },
          {
            subtext: '轻型栏板货车',
            left: '73%',
            top: '84%',
            textAlign: 'center',
            triggerEvent: true,
          },
        ],
        series: [
          
          {
            type: 'pie',
            radius: '18%',
            center: ['25%', '25%'],
            label: {
              show: false
            },
            encode: {
              itemName: 'product',
              value: vehicle[1],
            }
          },
          {
            type: 'pie',
            radius: '20%',
            center: ['25%', '50%'],
            label: {
              show: false
            },
            encode: {
              itemName: 'product',
              value: vehicle[2],
            }
          },
          {
            type: 'pie',
            radius: '20%',
            center: ['25%', '75%'],
            label: {
              show: false
            },
            encode: {
              itemName: 'product',
              value: vehicle[3],
            }
          },
          {
            type: 'pie',
            radius: '20%',
            center: ['50%', '25%'],
            label: {
              show: false
            },
            encode: {
              itemName: 'product',
              value: vehicle[4],
            }
          },
          {
            type: 'pie',
            radius: '20%',
            center: ['50%', '50%'],
            label: {
              show: false
            },
            encode: {
              itemName: 'product',
              value: vehicle[5],
            }
          },
          {
            type: 'pie',
            radius: '20%',
            center: ['50%', '75%'],
            label: {
              show: false
            },
            encode: {
              itemName: 'product',
              value: vehicle[6],
            }
          },
          {
            type: 'pie',
            radius: '20%',
            center: ['75%', '25%'],
            label: {
              show: false
            },
            encode: {
              itemName: 'product',
              value: vehicle[7],
            }
          },
          {
            type: 'pie',
            radius: '20%',
            center: ['75%', '50%'],
            label: {
              show: false
            },
            encode: {
              itemName: 'product',
              value: vehicle[8],
            }
          },
          {
            type: 'pie',
            radius: '20%',
            center: ['75%', '75%'],
            label: {
              show: false
            },
            encode: {
              itemName: 'product',
              value: vehicle[9],
            }
          },
        ]
      };
        option && myChart.setOption(option);
        window.onresize = myChart.resize;
        myChart.on("click", params => {
          console.log('这是小麦图的点击数据',params.data)
          if(params.componentType && params.componentType === "title"){
            console.log('xxx',params.componentIndex)
            let x=['其它','小型普通客车','大型汽车','小型汽车','普通二轮摩托车','重型栏板货车','微型栏板货车','大型普通客车','轻型栏板货车']
            let car=[]
                if(params.componentIndex===1){
                  car=x[0]
                }
                if(params.componentIndex===2){
                  car=x[1]
                }
                if(params.componentIndex===3){
                  car=x[2]
                }
                if(params.componentIndex===4){
                  car=x[3]
                }
                if(params.componentIndex===5){
                  car=x[4]
                }
                if(params.componentIndex===6){
                  car=x[5]
                }
                if(params.componentIndex===7){
                  car=x[6]
                }
                if(params.componentIndex===8){
                  car=x[7]
                }
                if(params.componentIndex===9){
                  car=x[8]
                }
                emitter.emit("car", car)
                

            }
          })

      });
    
    }
    });
    return {
      getState,
      ScatterData,
      vehicle,
      time,
      data,
      source,
      date2,
      date3,
      date4,
      date5,
      date6,
      setData,
    };
  },
  }
</script>

<style lang="css" scoped>
.chart {
  height: 340px;
}
</style>